<template>
  <div class="personaldata">
    <Pheader class="tou" msg="个人资料"/>
    <div class="touxiang">
      <p>当前头像:</p>
      <img src="../assets/images/juzi.png" alt />
      <a href="###">修改</a>
    </div>
    <div class="nicheng">
      <p>昵称:</p>
      <input class="inp" type="text" placeholder="1325456665" v-model="input" :disabled="true"/>
    </div>
    <div class="nicheng sex">
      <p>性别:</p>
      <p>
        <el-radio v-model="radio" label="1">男</el-radio>
        <el-radio v-model="radio" label="2">女</el-radio>
      </p>
    </div>
    <div class="nicheng day">
      <p>生日:</p>
      <p>
        <span class="item">
          <select v-model="formData.year">
            <option v-for="item in year" :value="item" :key="item">{{item}}</option>
          </select>
          年
        </span>
        <span class="item" @change="getDay">
          <select v-model="formData.month">
            <option v-for="item in month" :value="item" :key="item">{{item}}</option>
          </select>
          月
        </span>
        <span class="item">
          <select v-model="formData.day">
            <option v-for="item in day" :value="item" :key="item">{{item}}</option>
          </select>
          日
        </span>
      </p>
    </div>
    <div class="nicheng phone">
        <p>手机:</p>
          <input type="text" class="inp" placeholder="1325456665" v-model="input"/>
        <p class="change">更换手机</p>
    </div>
    <Pbutton class="button" msg="确认提交" @click="submit"></Pbutton>
  </div>
</template>
<script>
import Pbutton from '@/components/P_button.vue'
import Pheader from '@/components/P_header.vue'

export default {
  name: "personaldata",
  components: {
     Pbutton,
     Pheader
  },
  data() {
    return {
      input: '',
      radio: "1",
      year: [],
        month: [],
        day: [],
        formData: {
            year: 2019,
            month: 1,
            day: 1
        }
    };
  },
  methods: {
			init() {
				this.getYear();
				this.getMonth();
				this.getDay();
			},
			getYear() { //获取年
				let date = new Date;
				let current_year = date.getFullYear();
				for (let i = 0; i < 100; i++) {
					let y = current_year - i;
					this.year.push(y);
				}
			},
			getMonth() { //获取月
				for (let i = 1; i < 13; i++) {
					this.month.push(i);
				}
			},
			getDay() { //获取日
				this.day = [];
				let day = this.getDaysInMonth(this.formData.year, this.formData.month)
				for (let i = 1; i <= day; i++) {
					this.day.push(i);
				}
			},
			getDaysInMonth(year, month) { //获取某个月的天数
				month = parseInt(month, 10);
				let d = new Date(year, month, 0);
				return d.getDate();
			},
			padding0(num, length) { //数字前填充0方法
				for (let len = (num + "").length; len < length; len = num.length) {
					num = "0" + num;
				}
				return num;
            },
            submit() { //提交      
				let birthday = this.formData.year + "-" + this.padding0(this.formData.month, 2) + "-" + this.padding0(this.formData
					.day, 2);

				let cur_date = new Date();
				if (cur_date < new Date(birthday)) {
					alert("请选择小于今天的年月日");
					return;
				}
				// console.log(birthday); //birthday就是得到的最终的日期，格式为2019-01-01
            }
            },
            mounted() {
			this.init();
		},
    props: {
        msg: String
    }
    };
</script>
<style scoped>
.personaldata {
  position: absolute;
  top: -490px;
  left: 0px;
  width: 100%;
  height: 488px;
  border:1px solid #e7e7e7;
  background: #ffffff;
}
.personaldata .tou{
    padding:12px 13px;
    border-bottom: 1px solid #e7e7e7;
}
.personaldata p {
  margin-left: 20px;
}
.personaldata .inp{
    margin-left: 20px;
    height: 20px;
    margin-top:10px;
}
.personaldata .change{
   color: #91bc8a;
}
.personaldata .touxiang {
  display: flex;
  font: 14px/80px "simhei";
  margin-top: 80px;
}
.personaldata .touxiang img {
  width: 80px;
}
.personaldata .touxiang a {
  color: #91bc8a;
}
.personaldata .nicheng {
  display: flex;
  font: 14px/40px "simhei";
  margin-left: 23px;
}
.personaldata .button{
 margin:30px 0px 0px 100px;
}
</style>